import React from "react";
import { inject, observer } from "mobx-react";
import { url, artistlist } from "../../api";
import { axiosGet } from "../../axios";
@inject("singer")
@observer

class SingerSort extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      type: {
        '入驻歌手': 5001,
        '华语男歌手': 1001,
        '华语女歌手': 1002,
        "华语组合/乐队": 1003,
        '欧美男歌手': 2001,
        '欧美女歌手': 2002,
        "欧美组合/乐队": 2003,
        '日本男歌手': 6001,
        '日本女歌手': 6002,
        "日本组合/乐队": 6003,
        '韩国男歌手': 7001,
        '韩国女歌手': 7002,
        "韩国组合/乐队": 7003,
        '其他男歌手': 4001,
        '其他女歌手': 4002,
        "其他组合/乐队": 4003,
      },
      curStyle:'入驻歌手'
    };
  }
  componentDidMount(){
      this.getSongList(this.props.singer.singerSort)
  }
  //  设置类名
  setStyle(e){
      let val = e.target.innerHTML
        this.setState({
            curStyle:val
        })
        this.props.singer.setsingerSort(this.state.type[val])
        this.getSongList(this.state.type[val])
  }
  //  点击获取歌手列表
  getSongList(cat){
    axiosGet(url, artistlist, "cat=" + cat).then(
        (data) => {
          this.props.singer.setsingerList(data.artists)
        }
      );
  }

  //  渲染
  render() {
      let tags = Object.keys(this.state.type)
    return (
        <div className='singer-sort'>
            <div className="title">歌手分类：</div>
            <ul className="tags">
            {tags &&
                tags.map((item, index) => {
                  return (
                    <li key={index} className="item">
                      <span onClick={(e)=>{this.setStyle(e)}} className={this.state.curStyle === item ?"active":null}>{item}</span>
                    </li>
                  );
                })}
            </ul>
        </div>
    );
  }
}

export default SingerSort;
